<template>
  <div class="login clearfix">
    <div class="login-wrap">
      <el-row type="flex" justify="center">
        <el-form ref="loginForm" :model="user" status-icon label-width="80px">
          <h3>注册</h3>
          <hr>
          <el-form-item prop="username" label="用户名:">
            <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item prop="password" label="密码:">
            <el-input v-model="user.password" show-password placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item prop="passagin" label="验证密码:">
            <el-input v-model="user.passagin" show-password placeholder="请再次输入密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" plain @click="doRegister()">注册账号</el-button>
          </el-form-item>
        </el-form>
      </el-row>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "UserRegister",
  data() {
    return {
      user: {
        username: "",
        password: "",
        passagin: ""
      },
    };
  },
  created() {
    // console.log($);
    // console.log("1111");
  },
  methods: {
    doRegister() {
      if (!this.user.username) {
        this.$message.error("请输入用户名！");
        return;
      } else if (!this.user.password) {
          this.$message.error("请输入密码！");
          return;
      } else if(this.user.password === this.user.passagin) {
          // this.$router.push({ path: "/" }); //无需向后台提交数据，方便前台调试
          axios.post("http://localhost:8989/user/register", {
                userName: this.user.username,
                userPass: this.user.password
              })
              .then(res => {
                console.log("输出response.data", res.data);
                // console.log("输出response.data.status", res.data.status);
                if (res.data === "注册成功") {
                  this.$router.push({ path: "/" });
                } else {
                  this.$message.error("您输入的用户名已存在！");
                }
              }).catch(res=>{
                this.$message.error("注册失败！");
              });
      }
    }

  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.login {
  width: 100%;
  height: 100%;
  background: url("~@/assets/userbackground.jpg") no-repeat;
  background-size: cover;
  overflow: hidden;
}
.login-wrap {
  background: rgba(255, 255, 255, 0.8);
  background-size: cover;
  width: 400px;
  height: 350px;
  margin: 215px auto;
  overflow: hidden;
  padding-top: 10px;
  line-height: 20px;
}

h3 {
  color: #0babeab8;
  font-size: 24px;
}
hr {
  background-color: #444;
  margin: 20px auto;
}

.el-button {
  width: 60%;
  margin: 0 auto;
  color: #fff;
}
</style>